<template>
  <div class="wx_content">
    <div class="conditions">
      <el-row>
        <el-col :span="8"><el-input v-model="wd" placeholder="输入标题关键字搜索" @keyup.enter.native="submitSearch"></el-input></el-col>
        <el-col :span="3" style="margin-left:10px"><el-button type="primary" @click="submitSearch">搜索</el-button></el-col>
        <el-button type="primary" class="fr" @click="$router.push({name: 'ContentTypeWx'})">内容性质管理</el-button>
      </el-row>
      <el-row>
        <span class="label">内容性质：</span>
        <el-select v-model="attrId" placeholder="不限" clearable>
          <el-option v-for="item,n in attrs" :value="item.id" :label="item.name" :key="n.toString()"></el-option>
        </el-select>
        <span class="label">内容来源：</span>
        <el-select v-model="sourceType" placeholder="不限" clearable>
          <el-option :value="1" label="自己创建"></el-option>
          <el-option :value="2" label="来自微信同步"></el-option>
          <el-option :value="3" label="事业部下发"></el-option>
        </el-select>
        <span class="label">查看权限：</span>
        <el-select v-model="authStatus" placeholder="不限" clearable>
          <el-option :value="1" label="个人"></el-option>
          <el-option :value="2" label="事业部"></el-option>
          <el-option :value="3" label="公共"></el-option>
        </el-select>
      </el-row>
    </div>
    <div class="tb-head">
      <el-button @click="$router.push({name: 'EditWxContent', params: {id: 'new'}})" icon="plus">新建内容</el-button>
      <el-button @click="showDialog=true;">从微信同步内容</el-button>
      <el-button @click="topSet">置顶</el-button>
      <el-button @click="topCancel">取消置顶</el-button>
    </div>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="newsList.list" stripe
      @select="handleSelect" 
      @select-all="handleSelect">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="消息类型" width="400">
        <template slot-scope="scope">
          <div>
            多图文({{scope.row.newsList.length}})
            <el-tag v-if="scope.row.groupType">事业部</el-tag>
            <el-tag v-if="scope.row.commonType">公共</el-tag>
            <el-tag v-if="!scope.row.groupType&&!scope.row.commonType">自己可见</el-tag>
            <div v-if="scope.row.top" class="tag_hot">顶</div>
          </div>
          <div v-for="item,n in scope.row.newsList" class="newsItem" :key="n.toString()">
            <img :src="baseUrl + '/content/source/id/'+item.sourceId" alt="" class="preview">
            <p class="content">
              [图文{{n+1}}] <a :href="`${baseUrl}/content/wxnews/preview?logicId=${scope.row.id}&index=${n}`" target="_blank">{{item.title}}</a>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="内容来源">
        <template slot-scope="scope">
          {{scope.row.sourceType==1?'由我创建':scope.row.sourceType==2?'来自微信同步':'事业部下发'}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200"  class-name="is-center">
        <template slot-scope='scope'>
          <div><el-button type='text' @click="handleEdit(scope.row.id)">编辑</el-button></div>
          <div><el-button type='text' @click="handleDel(scope.row.id)">删除</el-button></div>
          <div><el-button type='text' @click="handleSendClick(scope.row.id)">发送设置</el-button></div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="sizes, total, prev, pager, next, jumper"
        :page-sizes="[10, 30, 50, 100]"
        :total="newsList.page.total"
        @current-change="submitSearch()"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <!-- 选择公众号 -->
    <el-dialog title="选择公众号" :visible.sync="showDialog">
      <span>请选择公众号：</span>
      <el-select v-model="appid">
        <el-option v-for="item,n in wechatList.list" :label="item.nickName" :value="item.appid" :key="item.appid.toString()"></el-option>
      </el-select>
      <div slot="footer">
        <el-button type="primary" @click="handleSync" :loading="isSave">确定</el-button>
        <el-button @click="showDialog=false;">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 发送设置 -->
    <dialog-send ref="dialogSend"></dialog-send>
  </div>
</template>
<script>
  import {mapActions, mapState, mapMutations} from 'vuex'
  import dialogSend from '@/components/common/content/wxSendDialog'
  import config from '@/config/env'
  export default {
    components: {dialogSend},
    data () {
      return {
        wd: '',
        attrId: null,
        sourceType: null,
        authStatus: null,
        page: 1,
        size: 10,
        page2: 1,
        appid: null,
        selection: [],
        showDialog: false,
        showDialog2: false,
        tbLoading: false,
        loading2: false,
        isSave: false,
        isSave2: false
      }
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        newsList: state => state.contentManage.wxNewsList,
        wechatList: state => state.wechatManage.wechatList,
        attrs: state => state.contentManage.contentType
      }),
      baseUrl () {
        return config.baseUrl
      }
    },
    methods: {
      ...mapActions(['getWxNewsList', 'getContentTypes', 'syncWxNews', 'delWxNews']),
      ...mapActions(['topContent']),
      ...mapMutations(['UPDATE_WX_SEND_INFO']),
      async initPage () {
        this.getContentTypes()
        await this.submitSearch()
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 搜索
      async submitSearch () {
        this.tbLoading = true
        await this.getWxNewsList({
          wd: this.wd,
          attrId: this.attrId,
          sourceType: this.sourceType,
          authStatus: this.authStatus,
          page: this.page,
          size: this.size
        })
        this.selection = []
        this.tbLoading = false
      },
      // 改变分页大小
      handleSizeChange (size) {
        this.size = size
        this.submitSearch()
      },
      // 同步微信
      async handleSync () {
        if (!this.appid) {
          this.$message.warning('请选择一个公众号')
          return false
        }
        this.isSave = true
        let res = await this.syncWxNews(this.appid)
        this.isSave = false
        this.$message.success(res.data.msgZ)
        this.showDialog = false
      },
      // 选中行
      handleSelect (selection) {
        this.selection = selection
      },
      // 置顶
      topSet () {
        if (this.selection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要置顶的内容'
          })
        } else {
          this.topContent({
            id: this.selection.map(item => item.id),
            top: 1
          }).then(res => {
            if (res.data.code === 1) {
              this.dialogVisible = false
              this.$message({
                type: 'success',
                message: '置顶成功'
              })
              this.submitSearch()
            }
          })
        }
      },
      // 取消置顶
      topCancel () {
        if (this.selection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要取消置顶的内容'
          })
        } else {
          this.topContent({
            id: this.selection.map(item => item.id),
            top: 0
          }).then(res => {
            if (res.data.code === 1) {
              this.dialogVisible = false
              this.$message({
                type: 'success',
                message: '取消置顶成功'
              })
              this.submitSearch()
            }
          })
        }
      },
      // 编辑
      handleEdit (id) {
        this.$router.push({
          name: 'EditWxContent',
          params: {id: id}
        })
      },
      // 删除
      async handleDel (id) {
        await this.$confirm('是否确认删除')
        const res = await this.delWxNews({id: [id]})
        res.data.code === 1 && this.$message.success('删除成功')
        this.submitSearch()
      },
      // 发送设置点击
      handleSendClick (id) {
        this.UPDATE_WX_SEND_INFO({id: id})
        this.$refs.dialogSend.visible = true
      }
    }
  }
</script>
<style lang="scss">
  .wx_content{
    .el-row{margin-bottom:15px;}
    .el-table td{padding:5px 0;vertical-align:top;}
    .el-tag{margin-left:10px;height:18px;line-height:16px;}
    .tag_hot{display: inline-block;background: #ff0000;font-size: 10px;width: 14px;height: 14px;line-height: 13px;text-align: center;color: #fff;vertical-align:top;}
    .newsItem{
      &{margin-top:10px;overflow:hidden;}
      .preview{float:left;width:100px;height:100px;}
      .content{margin-left:110px;}
      .content a{color:inherit;text-decoration:none;}
      .content a:hover{text-decoration:underline;}
    }
  }
</style>
